#{extends 'main.html' /}
#{set title:'Home' /}
		#{if session.get("usuario") != null}
		    	<div id="painelUsuario">
		    		<span class="painelUsuarioTitulo" >Você esta logado como: </span>
		    		<span class="painelUsuarioNome">
		    		
		    			${session.get("usuario")}
		    		
		    		</span>
		    		<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
		    		<span class="painelUsuarioComoAtuar">Informe como deseja atuar:</span>
		    		<select>
						#{list items:papeis, as:'pessoaPapel'}
	  							<option value='${pessoaPapel}'>${pessoaPapel}</option>
	  			  		#{/list}		
					</select>
					<form style="display: inline;" action="@{Application.logout()}">
					<span>&nbsp;&nbsp;&nbsp;&nbsp;</span><input  class="painelUsuarioSair" type="submit" name="Sair" value="Sair" />
					</form>
		    	</div>
		    	#{/if}
    	
    		
    		<div id="corpoAplicacao">
			    <script>
					$(function() {
						$( "#tabs" ).tabs();
						
						$('#tabs').bind('tabsselect', function(event, ui) {
							// dois paramentros; ação e função de retorno
							switch(ui.panel.id) {
							    	case "cadUsuarios":
							    		
							    	break;
							    	case "listarUsuarios":
							    		$.post('@{Application.testarAjax()}', { nome: "John", email: "teste@com.br" },  function(data) {
							    			$('#listarUsuarios').html(data);
								    	});
							    	break;
							    	case "tutorial":
							    		$.post('@{Application.tutorial()}', function(data) {
							    			$('#tutorial').html(data);
								    	});
							    	break;
							    }
						    

						    
						    //ui.tab     // anchor element of the selected (clicked) tab
						    //ui.panel   // element, that contains the selected/clicked tab contents
						    //ui.index   // zero-based index of the selected (clicked) tab
						});
					});
					
					
					
					
				</script>
				<div class="demo">
			
					<div id="tabs">
						<ul>
							<li><a href="#chamados">Chamados</a></li>
							#{if papeis != null}
								#{list items:papeis, as:'papel'}
									#{if papel == 'Administrador'}
										<li><a href="#manterUsuarios">Manter Usuários</a></li>
									#{/if}
								#{/list}
							#{/if}	
							<li><a href="#baseConhecimento">Base de Conhecimento</a></li>
						</ul>
						<div id="chamados">
							<div id="selecionarChamado">
								<form>
									<div id="filtroChamado">
										<fieldset>
											<legend>Filtro</legend>
												<select id="selecaoStatus" name="campofiltroChamado">
													<option value="todos">Todos</option>
													<option value="aberto">Aberto</option>
													<option value="recebido">Recebido</option>
													<option value="solucionado">Solucionado</option>
													<option value="finalizado">Finalizado</option>
												</select>
										</fieldset>
									</div>
									<fieldset style="height: 300px">
										<legend>Selecionar um Chamado</legend>
										<ul id="listaChamados">
											 
										</ul>
									</fieldset>	
									
									<input name="abrirChamado" type="button" value="Cadastrar novo chamado" style="margin-top: 20px;">
								</form>	
							</div>
							<div id="dadosChamado">
							
							
							</div>
						</div>
						
						<style type="text/css">
							#painelUsuario {
								font-size: 18px;
								color: blue;
								padding-top: 3px;
								height: 40px;
								background-color: #DCDCDC;
								border-radius: 8px 8px 8px 8px;
    			 				border: 1px solid black;
							}
							#painelUsuario span.painelUsuarioNome {
								font-weight: bold;
							}
							#painelUsuario input.painelUsuarioSair {
								width: 90px;
								font-weight: bold;
							}
						
							#manterUsuarios, #chamados  {
								width: 925px;
								height: 500px;
							
							}
							#listaUsuarios, #listaChamados {
								height: 387px;
								text-align: left;
								padding-left: 1px;
								border: 1px solid gray;
								 
    
							}
							#listaUsuarios{
								height: 310px;
							}
							#listaChamados {
								border: none;
								height: 350px;
							}
							
							#listaUsuarios li, #listaChamados li  {
								list-style: none;
								margin-bottom: 2px;
								background-color: #DCDCDC;
								cursor: pointer;
							}
							
							#listaUsuarios li.ativo , #listaChamados li.ativo {
								background-color: #BFBFBF;
							
							}
							#listaUsuarios li.hover, #listaChamados li.hover {
								background-color: #9AC0CD;
							
							}
						
							#selecionarUsuario, #selecionarChamado {
								width: 300px;
								height: 100%;
								padding-right: 5px;
								float: left;
								
							}
							#selecionarUsuario{
								height: 400px;
							}
							select[name="campofiltroChamado"] {
								width: 100%;
								font-size: 14px;
							}
							
							
							#dadosUsuario, #dadosUsuario {
								width: 600px;
								height: 100%;
								float: left;
							}
							#detalhesUsuario {
								width: 100%;
								height: 250px;
								padding-bottom: 5px;
							}
							#selecionarUsuario input[name='termoBusca'] {
								width: 270px;
							}
							#addPapeis {
								width: 100%;
								height: 200px;
							
							}
							#addPapeis form {
								height: 100%;
							}
							#addPapeis fieldset {
								height: 100%;
							}
							#dadosCadastro {
								width: 400px;
								height: 200px;
								float: left;
								  font-size: 13px;
							
							}
							
							#dadosCadastro input[disabled]{
								background-color: #DDDDDD;
							    color: blue;
							    font-style: italic;
							
							}
							#papeisUsuario {
								float: left;
								width: 250px;
								
								height: 140px;
							}
							#addNovoPapel {
								padding-left: 15px;
								float: left;						
									width: 250px;
								
								height: 140px;
							
							
							}
							#papeisUsuario fieldset div.papeis table {
								width: 100%;
							
							}
							#papeisUsuario fieldset div.papeis table tr td {
								text-align: left;
								padding: 2px;
								font-size: 14px;
							}
							#papeisUsuario fieldset div.papeis  table tr td {
								list-style: none;
								margin-bottom: 2px;
								background-color: #BFBFBF;
								cursor: pointer;
							
							}
							#papeisUsuario fieldset div.papeis table tr td.ativo {
								background-color: #DCDCDC;
							} 
							span.btnAcao {
								color: blue;
								text-decoration: underline;
								cursor: pointer;
							}
						
						</style>
						#{if papeis != null}
								#{list items:papeis, as:'papel'}
									#{if papel == 'Administrador'}
						<div id="manterUsuarios">
							<div id="selecionarUsuario">
								<form>
									<fieldset>
										<legend>Selecionar um Usuário</legend>
										<div style="padding-bottom: 3px; text-align: left;">
											<input type="text" name="termoBusca" value="">
										</div>
										<ul id="listaUsuarios">
											
										</ul>
										<input type="button" name="botaoCadastarUsuario" value="Cadastrar Novo Usuário" style="margin-top: 20px;">
									</fieldset>	
								</form>	
								
							</div>
							<div id="dadosUsuario">
								<div id="detalhesUsuario">
									<form action="@{Application.receberForm()}" method="GET">
										<fieldset>
											<legend>Usuário Selecionado</legend>
											<div id="dadosCadastro">
												<input type="hidden" name="idPessoa" value="" >
												<table>
													<tr>
														<td>
												    		<label>Nome Completo</label>
												    	</td>
												    	<td>
												    		<input disabled="disabled" type="text" name="nomeCompleto" size="30"  maxlength="200" value="" />
												    	</td>
												    </tr>
												    <tr>
														<td>
												    		<label>Nome</label>
												    	</td>
												    	<td>
												    		<input disabled="disabled" type="text" name="nome" size="30"  maxlength="200" />
												    	</td>
												    </tr>
													<tr>
														<td>
														    <label>Email</label>
												    	</td>
												    	<td>
														    <input disabled="disabled" type="text" name="email"  size="30"  maxlength="250" />
														</td>
													</tr>
													<tr>
														<td>
														    <label>Cpf:</label>
												    	</td>
												    	<td>
														    <input disabled="disabled" type="text" name="cpf"  size="30"  maxlength="250" />
														</td>
													</tr>
													<tr>
														<td>
														    <label>Senha</label>
														 </td>
														 <td> 
														    <input disabled="disabled" type="password" name="senha"  size="30"   maxlength="15"  />
														 </td>
													</tr>
													<tr>
														<td>
													    	<label>Repetir Senha:</label>
													    </td>
													    <td>
													    	<input disabled="disabled" type="password" name="senhaRepetida"  size="30"   maxlength="15"  />
													    </td>
													</tr>
											    </table>
											   <div id="dadosCadastroAcoes">
											   </div>
											</div>
											
										
										</fieldset>	
									</form>	
								</div>
								<div id="addPapeis" align="left">
									<form>
										<fieldset>
											<legend>Gerenciar Papeis</legend>
											<div id="papeisUsuario">
												<fieldset>
													<legend>Papeis</legend>
													<div class="papeis">
													
													</div>
												
												</fieldset>
											</div>
											<div id="addNovoPapel">
												<fieldset>
													<legend>Novo Papel</legend>
													<div class="painelNovoPapel">
													
													</div>
												
												</fieldset>
											</div>
											
										</fieldset>
									</form>
								</div>
							
							</div>
						</div>
						#{/if}
								#{/list}
							#{/if}	
						<div id="baseConhecimento">
							<p>a ser carregado dinamicamente.</p>
						</div>
					</div>

				</div>
    		</div>
    		<div id="rodape">
        
        	</div>
    	</div>
	




